<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 缩放的Line
 * @LastEditTime: 2021-11-26 12:24:36
 * @FilePath: \tianjushi-kanban\src\components\charts\Liquid1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-liquidfill";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    }, 
    fontSize: {
      default: 16,
      type: Number,
    },
    value: {
      default: 0.5,
      type: Number,
    }, 
    color: {
      type: Array,
      default: ["#6CDEFC","#429BF7"],
    },
  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      function _pie2() {
        let dataArr = [];
        for (var i = 0; i < 8; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 25,
              itemStyle: {
                normal: {
                  color: "rgba(88,142,197,0.5)",
                },
              },
            });
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 20,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0,0)",
                },
              },
            });
          }
        }
        return dataArr;
      }
      const value = props.value;
      const value1 = 0.0;
      const data = [value, value1];
      const option = {
        series: [
          {
            type: "liquidFill",
            radius: "67%",
            center: ["50%", "50%"],
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: props.color[0]
                  },
                  {
                    offset: 0,
                    color: props.color[1],
                  },
                ],
                globalCoord: false,
              },
            ],
            data: data,
            backgroundStyle: {
              borderWidth: 1,
              color: "RGBA(51, 66, 127, 0.7)",
            },
            label: {
              normal: {
                formatter: (value * 100).toFixed(1) + "%",
                textStyle: {
                  fontSize: 28,
                  color: "#fff",
                },
              },
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0,
              },
              borderDistance: 0,
            },
          },
          {
            type: "pie",
            zlevel: 1,
            silent: true,
            center: ["50%", "50%"],
            radius: ["75%", "74%"],
            hoverAnimation: false,
            color: "rgba(88,142,197,0.5)",
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },

            data: [1],
          },
          {
            type: "pie",
            zlevel: 2,
            silent: true,
            center: ["50%", "50%"],
            radius: ["83%", "80%"],
            startAngle: 50,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: _pie2(),
          },
          {
            type: "pie",
            zlevel: 3,
            silent: true,
            center: ["50%", "50%"],
            radius: ["78%", "79%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: _pie2(),
          },
        ],
      };

      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>